<template>
	<view class="goods-content-list">
		<view class="goods-card" v-for="(item2, index2) in goodsList" :key="index2" @click="navToDetailPage(item2)" :style="{'border-radius': item.bgStyle == 'circle' ? '10px' : '0px'}">
			<img :src="item2.slider_image" style="width: 100%;height: 294rpx;">
			<view style="padding: 20rpx;width: 87%;height: 100rpx;">
				<view class="goods-title" v-if="item.show_title == 1">{{ item2.name }}</view>
			</view>
			<view class="price-info">
				<view class="price" v-if="item.show_price == 1" :style="{'color': fontColor}"><span>￥</span>{{ item2.price }}</view>
				<view class="huaxian" v-if="item.show_origin_price == 1">￥{{ item2.original_price }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "goodsList",
		props: {
			goodsList: {
				type: Array,
				default () {
					return []
				}
			},
			item: {
				type: Object,
				default () {
					return {}
				}
			},
			fontColor: {
				type: String,
				default () {
					return ""
				}
			}
		},
		data() {
			return {}
		},
		methods: {
			// 普通商品详情页
			navToDetailPage(item) {
				let id = item.id;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.goods-content-list {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		width: 100%;
		&:after {
			content: "";
			width: 48%;
		}
		
		.goods-card {
			width: 48%;
			height: 460rpx;
			border-radius: 10rpx;
			margin-top: 20rpx;
			background: #fff;
			.goods-title-box {
				height: 82rpx;
				padding: 10rpx 20rpx;
			}
			.goods-title {
				color: #2e2e2e;
				font-size: 28rpx;
				line-height: 40rpx;
				word-break: break-all;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			
			.price-info {
				display: flex;
				margin-left: 20rpx;
				
				.price {
					font-size: 32rpx;
					color: #FA4D44;
					span {
						font-size: 25rpx;
					}
				}
				.huaxian {
					font-size: 26rpx;
					margin-left: 10rpx;
					text-decoration: line-through;
					color: #999999;
					padding-top: 4rpx;
				}
			}
		}
	}
	
</style>